<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>流量统计-产品详情页分析</title>
		<meta name="description" content="overview &amp; stats" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.css" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/font-awesome/4.2.0/css/font-awesome.min.css" />
		<!-- page specific plugin styles -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery-ui.custom.min.css" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery.gritter.min.css" />
		<!-- text fonts -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/fonts/fonts.googleapis.com.css" />
		<!-- BootstrapValidator -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrapValidator.min.css" />
		<!-- ace styles -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
		<link rel="stylesheet" href="${rc.contextPath}/stylesheets/daterangepicker.css">

        <link rel="stylesheet" href="${rc.contextPath}/stylesheets/loading.css" />
		<link rel="stylesheet" href="${rc.contextPath}/stylesheets/tips.css"/>
		<!-- ace settings handler -->
		<script src="${rc.contextPath}/assets/js/ace-extra.min.js"></script>
		<script type="text/javascript" src="${rc.contextPath}/javascripts/jquery.2.1.1.min.js"></script>

	</head>

	<body class="no-skin" style="background-color: #FFF;">
		<div class="page-content">
			<div class="row">
				<div class="col-xs-12">
					<div class="widget-box">
						<div class="widget-header widget-header-small">
							<h5 class="widget-title lighter">筛选条件</h5>
						</div>
						<div class="widget-body" style="background-color: #EFF3F8;">
							<div class="widget-main">
								<form class="form-inline" id="searchForm" method="post" action="#">
                                    <input type="hidden" id="saleFlag" name="saleFlag" class="form-control" value="">
									<div class="row widget-main">
										<div class="form-group">
											<label class="control-label no-padding-right">选择时段</label>
											<input type="text" id="config-demo" name="chooseTime" class="form-control time">
											<button id="app_search" type="button"  onclick="replaceDate(this,'1');" class="btn btn-white btn-sm">
												<span class="ace-icon icon-on-right bigger-110"></span>
												昨日
											</button>
											<button id="app_search" type="button"  onclick="replaceDate(this,'7');" class="btn btn-white btn-sm">
												<span class="ace-icon icon-on-right bigger-110"></span>
												过去7天
											</button>
											<button id="app_search" type="button"  onclick="replaceDate(this,'31');" class="btn btn-white btn-sm">
												<span class="ace-icon icon-on-right bigger-110"></span>
												过去31天
											</button>
										</div>
										<div class="form-group">
											<label class="control-label no-padding-right">分站</label>
											<select data-placeholder="" class="chosen-select" tabindex="2"
													name="station" id="station">
												<#if stationList?? && stationList?size&gt;0>
													<option value ="">全部</option>
													<#list stationList as item>
														<option value="${item.stationId}" <#if item.stationName == '上海'>selected</#if> >${item.stationName}</option>
													</#list>
												</#if>
											</select>
										</div>
										<div class="form-group">
											<label>平台</label>
											<select data-placeholder="" class="chosen-select" tabindex="2"
													name="plat_form" id="plat_form">
												<option value="">全部</option>
												<option value="app">APP</option>
												<option value="ios">IOS</option>
												<option value="android">安卓</option>
												<option value="wap">WAP</option>
												<option value="PC">PC</option>
											</select>
										</div>
										<div class="form-group">
											<label class="control-label no-padding-right">访问类型</label>
											<input type="hidden" name="accessType" id="accessType" value="${conditionVO.accessType!}">
											<div class="btn-group">
												<label class="btn btn-sm btn-link"> <input
														type="radio" name="access_type" checked="true" value="pv">
													PV
												</label><label class="btn btn-sm btn-link"> <input
													type="radio" name="access_type" value="uv">
												UV
											</label>
												</label><label class="btn btn-sm btn-link"> <input
													type="radio" name="access_type" value="session">
												SESSION
											</label>
											</div>
										</div>
										<div class="form-group">
											<button type="button" class="btn btn-pink btn-sm" onclick="searchList();" id="search">
												<span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
												Search
											</button>
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-12">
					<div class="tabbable">
						<ul class="nav nav-tabs tab-color-blue background-blue" id="myTab" style="padding-left: 3px;">
							<li class="active" style="width:150px;font-size:14px;text-align:center;">
								<a data-toggle="tab" href="#" onclick="statistics('#allDetail');" aria-expanded="false"> 产品详情 </a>
							</li>
							<li class="" style="width:150px;font-size:14px;text-align:center;">
								<a data-toggle="tab" href="#" onclick="statistics('#generalDetail');" aria-expanded="true"> 非特卖产品详情 </a>
							</li>
							<li class="" style="width:150px;font-size:14px;text-align:center;">
								<a data-toggle="tab" href="#" aria-expanded="true" onclick="statistics('#temaiDetail');"> 特卖产品详情 </a>
							</li>
						</ul>
						<div class="tab-content"  style="padding-top: 0px;">
							<div id="generalDetail" class="tab-pane active in">
								<div class="row">
									<div class="col-xs-12">
										<div class="widget-header widget-header-flat">
											<h4 class="widget-title lighter">
												<i class="ace-icon fa fa-star orange"></i><span class="title_bar"></span>
												<label class="help_img">
													<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#999999!important;"></i>
													<span class='tips'>某一时间段内各品类产品详情页的浏览量总和<span class="content_name"></span><s></s></span>
												</label>
												<small class="pink">单击节点, 发现更多</small>
												<!-- <span class="label label-lg label-purple arrowed" style="float:right;margin-top:5px;margin-right:10px;padding: 6px;" id="exportDetail" onclick="exportCsv2();">导出</span> -->
											</h4>
										</div>
										<div class="widget-body">
											<div id="detailChart" style="height: 400px;"></div>
										</div>
									</div>
									<input type="hidden" id="categoryName" value="景点门票">
									<div class="col-xs-12">
										<h4 class="header" style="color:#000;"><span class="table_title">产品列表</span>
											<label class="help_img">
												<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#999999!important;"></i>
												<span class='tips'>某一时间段内产品详情页的浏览量排名<span class="content_name"></span><s></s></span>
											</label>
										</h4>
										<table id="simple-table-one" class="table table-striped table-bordered table-hover dataTable">
											<thead>
											<tr>
												<th>序号</th>
												<th>产品名称</th>
												<th>产品id</th>
												<th class="sorting_desc" onclick="getProductList(this,null,'1','10')">pv</th>
												<td>追踪溯源</td>
											</tr>
											</thead>
											<tbody id="data1">
												<tr><td colspan="12"><div class="alert alert-danger" style="margin-bottom: 0px;text-align:center" role="alert">没有记录!</div></td></tr>
											</tbody>
										</table>
										<div class="ui-jqgrid" id="ui-jqgrid1" style="display: none;">
											<div id="grid-pager"
												 class="ui-state-default ui-jqgrid-pager ui-corner-bottom"
												 dir="ltr">
												<div id="pg_grid-pager" class="ui-pager-control" role="group">
													<input type="text" id="currentPage" hidden="true" value=1>
													<input type="text" id="page_size" value=10 hidden="true">
													<input type="text" id="page_total" hidden="true">
													<table cellspacing="0" cellpadding="0" border="0"
														   class="ui-pg-table"
														   style="width: 100%; table-layout: fixed; height: 100%;"
														   role="row">
														<tbody>
														<tr>
															<td id="grid-pager_left" align="left"></td>
															<td id="grid-pager_center" align="center"
																style="white-space: pre; width: 343px;"><table
																	cellspacing="0" cellpadding="0" border="0"
																	style="table-layout: auto;" class="ui-pg-table">
																<tbody>
																<tr>
																	<td id="first_grid-pager"
																		onclick="showPage('firstPage','productList')"
																		class="ui-pg-button ui-corner-all <#if page.isFirstPage>ui-state-disabled</#if>"
																		style="cursor: pointer;"><span
																			class="ui-icon ace-icon fa fa-angle-double-left bigger-140"></span></td>
																	<td id="prev_grid-pager"
																		onclick="showPage('prePage','productList')"
																		class="ui-pg-button ui-corner-all <#if page.isFirstPage>ui-state-disabled</#if>"
																		style="cursor: pointer;"><span
																			class="ui-icon ace-icon fa fa-angle-left bigger-140"></span></td>
																	<td dir="ltr">Page <input class="ui-pg-input" id="page_num"
																							  type="text" size="2" maxlength="7" disabled="true"
																							  value="${page.pageNum!}" role="textbox"> of <span
																			id="sp_1_grid-pager"></span></td>
																	<td id="next_grid-pager"
																		onclick="showPage('nextPage','productList')"
																		class="ui-pg-button ui-corner-all <#if page.isLastPage>ui-state-disabled</#if>"
																		style="cursor: pointer;"><span
																			class="ui-icon ace-icon fa fa-angle-right bigger-140"></span></td>
																	<td id="last_grid-pager"
																		onclick="showPage('lastPage','productList')"
																		class="ui-pg-button ui-corner-all <#if page.isLastPage>ui-state-disabled</#if>"
																		style="cursor: pointer;"><span
																			class="ui-icon ace-icon fa fa-angle-double-right bigger-140"></span></td>
																</tr>
																</tbody>
															</table></td>

															<td id="grid-pager_right" align="right">
																<div dir="ltr" style="text-align: right" class="ui-paging-info">View
																	<span id="view_start_row"></span> - <span id="view_end_row"></span>
																	of <span id="view_page_total"></span>
																</div>
															</td>
														</tr>
														</tbody>
													</table>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row" id="track">
				<div class="col-xs-12">
					<div class="widget-box">
						<div class="widget-body">
							<h4 class="pink">
								<i class="ace-icon fa fa-hand-o-right green"></i>
								<a href="#modal-form" role="button" class="blue" data-toggle="modal"> 产品名称：<span id="productName"></span> </a>
							</h4>
							<div class="widget-main row">
								<div class="col-xs-6">
									<div class="widget-box">
										<div class="widget-body" style="width: 100%; height: 300px; margin: 0 auto;">
											<h4 style="text-align: center;">流量来源分布图</h4>
											<div id="main1"></div>
										</div>
									</div>
									<div class="widget-box" id="table1" style="display: none; margin: 40px 0">
										<div class="widget-body">
											<table id="simple-table" class="table table-striped table-bordered table-hover">
												<thead>
												<tr>
													<th>序号</th>
													<th>流量来源</th>
													<th>流量数据(<span id = "access_type1"></span>)</th>
													<th>占比</th>
												</tr>
												</thead>
												<tbody id="dataF">
												</tbody>
											</table>
										</div>
									</div>
								</div>
								<div class="col-xs-6" style="padding-left: 0">
									<div class="widget-box">
										<div class="widget-body" style="width: 100%; height: 300px; margin: 0 auto;">
											<h4 style="text-align: center;">流量去向分布图</h4>
											<div id="main2"></div>
										</div>
									</div>
									<div class="widget-box" id="table2"  style="display: none;margin: 40px 0">
										<div class="widget-body">
											<table id="simple-table" class="table table-striped table-bordered table-hover">
												<thead>
												<tr>
													<th>序号</th>
													<th>流量去向</th>
													<th>流量数据(<span id = "access_type2"></span>)</th>
													<th>占比</th>
												</tr>
												</thead>

												<tbody id="dataT">

												</tbody>
											</table>
										</div>
									</div>
								</div>
								<div class="ui-jqgrid1_detail">
									<div id="grid-pager_detail"
										 class="ui-state-default ui-jqgrid-pager ui-corner-bottom"
										 dir="ltr">
										<div id="pg_grid-pager_detail" class="ui-pager-control" role="group">
											<input type="text" id="currentPage_detail" hidden="true" value=1>
											<input type="text" id="page_size_detail" value =20 hidden="true">
											<input type="text" id="page_total_detail" hidden="true">
											<table cellspacing="0" cellpadding="0" border="0"
												   class="ui-pg-table"
												   style="width: 100%; table-layout: fixed; height: 100%;"
												   role="row">
												<tbody>
												<tr>
													<td id="grid-pager_left_detail" align="left"></td>
													<td id="grid-pager_center_detail" align="center"
														style="white-space: pre; width: 343px;"><table
															cellspacing="0" cellpadding="0" border="0"
															style="table-layout: auto;" class="ui-pg-table">
														<tbody>
														<tr>
															<td id="first_grid-pager_detail"
																onclick="showPage('firstPage','detail')"
																class="ui-pg-button ui-corner-all <#if page.isFirstPage>ui-state-disabled</#if>"
																style="cursor: pointer;"><span
																	class="ui-icon ace-icon fa fa-angle-double-left bigger-140"></span></td>
															<td id="prev_grid-pager_detail"
																onclick="showPage('prePage','detail')"
																class="ui-pg-button ui-corner-all <#if page.isFirstPage>ui-state-disabled</#if>"
																style="cursor: pointer;"><span
																	class="ui-icon ace-icon fa fa-angle-left bigger-140"></span></td>
															<td dir="ltr">Page <input class="ui-pg-input" id="page_num_detail"
																					  type="text" size="2" maxlength="7" disabled="true"
																					  value="${page.pageNum!}" role="textbox"> of <span
																	id="sp_1_grid-pager_detail">${page.pages!}</span></td>
															<td id="next_grid-pager_detail"
																onclick="showPage('nextPage','detail')"
																class="ui-pg-button ui-corner-all <#if page.isLastPage>ui-state-disabled</#if>"
																style="cursor: pointer;"><span
																	class="ui-icon ace-icon fa fa-angle-right bigger-140"></span></td>
															<td id="last_grid-pager_detail"
																onclick="showPage('lastPage','detail')"
																class="ui-pg-button ui-corner-all <#if page.isLastPage>ui-state-disabled</#if>"
																style="cursor: pointer;"><span
																	class="ui-icon ace-icon fa fa-angle-double-right bigger-140"></span></td>
														</tr>
														</tbody>
													</table></td>

													<td id="grid-pager_right_detail" align="right">
														<div dir="ltr" style="text-align: right" class="ui-paging-info">View
															<span id="view_start_row_detail"></span> - <span id="view_end_row_detail"></span>
															of <span id="view_page_total_detail"></span>
														</div>
													</td>
												</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="${rc.contextPath}/assets/js/moment.min.js"></script>
	   	<script type="text/javascript" src="${rc.contextPath}/javascripts/bootstrap.min.js"></script>
	   	<script type="text/javascript" src="${rc.contextPath}/javascripts/moment.js"></script>
	   	<script type="text/javascript" src="${rc.contextPath}/javascripts/daterangepicker.js"></script>
	   	<script src="${rc.contextPath}/assets/js/jquery.gritter.min.js"></script>
		<!-- ace scripts -->
		<script src="${rc.contextPath}/assets/js/ace-elements.min.js"></script>
		<script src="${rc.contextPath}/assets/js/ace.min.js"></script>
		<script src="${rc.contextPath}/assets/js/chosen.jquery.js"></script>
		<script src="${rc.contextPath}/assets/js/d3.v3.min.js"></script>
		<script type="text/javascript" src="${rc.contextPath}/javascripts/loading.js"></script>
		<script type="text/javascript" src="${rc.contextPath}/javascripts/dateRange.js"></script>
		<script type="text/javascript" src="${rc.contextPath}/javascripts/g2.js"></script>
		<script type="text/javascript" src="${rc.contextPath}/javascripts/g2-modal.js"></script>
		<script type="text/javascript" src="${rc.contextPath}/javascripts/FileSaver.js"></script>
		<script type="text/javascript" src="${rc.contextPath}/javascripts/export-csv.js"></script>
		<script type="text/javascript">
			d3.select(self.frameElement).style("height", "2400px");
			jQuery(function($) {
				recoverButtonColor($(".time").siblings("button").eq(1));
				changeButtonColor($(".time").siblings("button").eq(0));
				startDate = new Date(new Date().getTime()-1*1000*60*60*24);
				endDate = new Date(new Date().getTime()-1*1000*60*60*24);
				var dateStr = dateFormat(startDate) + " - " + dateFormat(endDate);
				$("#config-demo").val(dateStr);
				$('.chosen-select').chosen();
                $("#track").css("visibility", "hidden");
				$('.chosen-select-deselect').chosen({ allow_single_deselect: true });
				showCharts("产品详情页概览图","detailChart");
			});
			function statistics(obj){
				if(obj == "#generalDetail"){
                    $("#saleFlag").val("false");
					showCharts("产品详情页概览图","detailChart");
				}else if(obj == "#temaiDetail"){
                    $("#saleFlag").val("true");
					showCharts("特卖产品详情页概览图","detailChart");
				}else{
                    $("#saleFlag").val("");
                    showCharts("产品详情页概览图","detailChart");
				}
			}

            function showCharts(title,obj){
                var access_type = $('input:radio[name="access_type"]:checked').val();
                var stationId = $("#station").val();
                var statisticCode = $("#plat_form").val();
                var chooseTime = $("#config-demo").val();
                var dataForm  = {
                    "stationId":stationId,
					"chooseTime":chooseTime,
					"accessType":access_type,
					"statisticCode":statisticCode,
					"saleFlag":$("#saleFlag").val()
                }
				$(".title_bar").html(title);
                $.ajax({
                    url: "${rc.contextPath}/product/productDetailChartData",
                    data: dataForm,
                    dataType:"json",
                    beforeSend : function(){
						$("#search").attr("disabled",true);
						openPartialLayer($("#detailChart"));
                    },
                    complete :function(){
                    	$("#search").attr("disabled",false);
						removeLoading($("#detailChart"));
                    },
                    success: function(data){
                    	var defs = {
							'categoryName': {
								alias : '品类'
							},
							'amount': {
								alias :'浏览量(/次)'
							}
						};
						var chart = histogramModal(data.jsonData,'detailChart','categoryName','amount','品类','浏览量(/次)',400,defs);
                        $(".table_title").html("产品列表");
						if(data.jsonData != ""){
							var currentPage=1;//当前页面
							var page_size=$("#page_size").val();//页面大小10条
							var data1 = chart.getAllGeoms()[0].getData()[0];
							$("#categoryName").val(data1._origin.categoryName);
							$(".table_title").html("产品列表("+data1._origin.categoryName+")");
							getProductList(null,data1._origin.categoryName,currentPage,page_size);
						}else{
							var tbody='<tr><td colspan="12"><div class="alert alert-danger" style="margin-bottom: 0px;text-align: center" role="alert">没有记录!</div></td></tr>';
							$(".ui-jqgrid").hide();
							$("#data1").html("");
							$("#data1").html(tbody);
							$("#data2").html("");
							$("#data2").html(tbody);
                            $("#simple-table-one").show();
                            $("#simple-table-two").show();
						}
						chart.on('plotclick', function (ev) {
							var data = ev.data;
							if (data) {
								$(".table_title").html("产品列表("+ev.data._origin.categoryName+")");
								$("#categoryName").val(ev.data._origin.categoryName);
								getProductList(null,ev.data._origin.categoryName,currentPage,page_size);
							}
						});
						$("#detailChart").css("cursor","pointer");
                    }
                });

            }

			function searchList(){
				var index = $(".nav-tabs li.active").index();
				var obj =  "#allDetail";
				if(index == 1){
					obj = "#generalDetail";
				}else if(index == 2){
					obj = "#temaiDetail";
				}
				statistics(obj);
			}

			function getProductList(obj,categoryName,currentPage,page_size){
				var className = $("#simple-table-one th:last").attr("class");
				if(obj != null){
					if(className == "sorting_desc"){
						className = "sorting_asc";
						$("#simple-table-one th:last").attr("class","sorting_asc");
					}else{
						className = "sorting_desc";
						$("#simple-table-one th:last").attr("class","sorting_desc");
					}
				}
				if(categoryName == null){
					categoryName = $("#categoryName").val();
				}
				var saleFlag = $("#saleFlag").val();
				var choose_date = $("#config-demo").val();
                var statisticCode = $("#plat_form").val();
				var access_type = $('input:radio[name="access_type"]:checked').val();
				var stationId= $("#station").val();
				$("#simple-table-one th:last").html(access_type);
				var url;
				if(className == "sorting_desc"){
					url = '${rc.contextPath}/product/beforeFiftyProductList';
				}else{
					url = '${rc.contextPath}/product/afterFiftyProductList';
				}
				$.ajax({
					url : url,
					type : "POST",
					data : {
						chooseTime:choose_date,
						accessType:access_type,
						stationId:stationId,
                        statisticCode:statisticCode,
						page:currentPage,
						pageSize:page_size,
						saleFlag:saleFlag,
						categoryName:categoryName
					},
					beforeSend : function(){
						openPartialLayer($("#simple-table-one").parent(".col-xs-12"));
					},
					complete :function(){
						removeLoading($("#simple-table-one").parent(".col-xs-12"));
					},
					success:function(data) {
						var tbody = "";
						if(data !="" && data.page != null && data.page.list != "" && data.page.list != null){
							var page=data.page;
							if(page.pages>1){
								$("#page_total").val(page.pages);
								$("#currentPage").val(page.pageNum);
								$("#page_num").val(page.pageNum);
								$("#sp_1_grid-pager")[0].innerText=page.pages;
								$("#view_start_row")[0].innerText= page.startRow;
								$("#view_end_row")[0].innerText= page.endRow;
								$("#view_page_total")[0].innerText= page.total;
								$("#ui-jqgrid1").show();
							}else{
								$("#ui-jqgrid1").hide();
							}

							$.each(page.list,function(n,value) {
								tbody +=  "<tr>"+
										"<td width='5%'>"+ (n+1) +"</td>"+
										"<td width='65%'>"+value.productName +"</td>"+
										"<td width='15%'>"+value.productId +"</td>"+
										"<td width='10%'>"+value.amount +"</td>"+
                                    	"<td width='5%'onclick='trackProduct(\""+ value.productId +"\",\""+value.productName+"\")'>"+
                                    	"<div class='action-buttons show-details-btn' style='cursor:pointer;'> <a class='green bigger-140' title='Show Details'>"+
                                   	 	"<i class='ace-icon fa fa-angle-double-down'></i> <span class='sr-only'>Details</span> </a> </div>"+
										"</td>"+
										"</tr>";
							});
						}else{
							tbody='<tr><td colspan="12"><div class="alert alert-danger" style="margin-bottom: 0px;text-align: center" role="alert">没有记录!</div></td></tr>';
							$("#ui-jqgrid1").hide();
						}
						$("#data1").html(tbody);

					},
					error:function(data) {
						//showMsg("查询数据有误");
					}
				});

			}

			function showPage(param, type) {
			    var endrowId = "#sp_1_grid-pager";
			    var currentPage = "#currentPage";
			    var page_size = "#page_size";
			    var categoryName = "#categoryName";
			    if (type != 'productList'){
                    endrowId = endrowId + "_" + type;
                    currentPage = currentPage + "_" + type;
                    page_size = page_size + "_" + type;
                    categoryName = categoryName + "_" + type;
				}
				var endrow = parseInt($(endrowId)[0].innerText);
				var currentPage = parseInt($(currentPage).val());
				var page_size = $(page_size).val();
				var categoryName = $(categoryName).val();
				if('firstPage'==param) {
					currentPage =1;
				}
				else if('prePage'==param) {
					if(currentPage==1){
						currentPage ==1;
					}else{
						currentPage = currentPage-1;
					}
				}
				else if('nextPage'==param) {
					if(currentPage==endrow){
						currentPage = endrow;
					}else{
						currentPage = currentPage+1;
					}
				} else if('lastPage'==param) {
					currentPage = endrow;
				}
				if (type == 'productList'){
                    getProductList(null,categoryName,currentPage,page_size);
				}else{
                    loadPorduct(currentPage,page_size);
				}

			}
			var dataObj={}
			function loadPorduct(currentPage, pageSize){
                dataObj.page = currentPage;
                dataObj.pageSize = pageSize;
                $.ajax({
                    url: "${rc.contextPath}/product/trackProduct",
                    type: "POST",
                    data: dataObj,
                    beforeSend: function () {
                        openPartialLayer($("#simple-table-one").parent(".col-xs-12"));
                    },
                    complete: function () {
                        removeLoading($("#simple-table-one").parent(".col-xs-12"));
                    },
                    success : function(data) {


                        if (data != null) {
							$("table").show();
                            $("#dataF").empty();
                            $("#dataT").empty();
                            var page = data.fromList;
                            if(page.pages>1){
                                $("#page_total_detail").val(page.pages);
                                $("#currentPage_detail").val(page.pageNum);
                                $("#page_num_detail").val(page.pageNum);
                                $("#sp_1_grid-pager_detail")[0].innerText=page.pages;
                                $("#view_start_row_detail")[0].innerText= page.startRow;
                                $("#view_end_row_detail")[0].innerText= page.endRow;
                                $("#view_page_total_detail")[0].innerText= page.total;
                                $(".ui-jqgrid1_detail").show();
                            }else{
                                $(".ui-jqgrid1_detail").hide();
                            }

                            var fromList = data.fromList.list;
                            var toList = data.toList.list;
                            var amountF = data.amountF;
                            var otherAmountF = data.otherAmountF;
                            var otherRateF = data.otherRateF;
                            var amountT = data.amountT;
                            var otherAmountT = data.otherAmountT;
                            var otherRateT = data.otherRateT;
                            var defaultLength = data.defaultLength
                            xAxisDatafName = data.xAxisDatafName;
                            xAxisDatatName = data.xAxisDatatName;

                            var chart1 = chartModal(data.jsonData1,'main1','流量来源排行');
                            chart1.on('tooltipchange', function(ev) {
                                var items = ev.items; // tooltip显示的项
                                var origin = items[0]; // 将一条数据改成多条数据
                                items.splice(0); // 清空
                                var xFName = xAxisDatafName[origin.name-1];
                                items.push({
                                    name: origin.name,
                                    title: origin.title,
                                    marker: true,
                                    color: origin.color,
                                    value :xFName
                                });
                                items.push({
                                    name: '到达流量',
                                    marker: true,
                                    title: origin.title,
                                    color: origin.color,
                                    value: origin.value
                                });
                            });
                            var chart2 = chartModal(data.jsonData2,'main2','流量去向排行');
                            chart2.on('tooltipchange', function(ev) {
                                var items = ev.items; // tooltip显示的项
                                var origin = items[0]; // 将一条数据改成多条数据
                                items.splice(0); // 清空
                                var xFName = xAxisDatatName[origin.name-1];
                                items.push({
                                    name: origin.name,
                                    title: origin.title,
                                    marker: true,
                                    color: origin.color,
                                    value :xFName
                                });
                                items.push({
                                    name: '去向流量',
                                    marker: true,
                                    title: origin.title,
                                    color: origin.color,
                                    value: origin.value
                                });
                            });
                            if(fromList != null && fromList.length > 0){
                                var access_type = $('input:radio[name="access_type"]:checked').val();
                                var i;
                                for (i = 0; i < defaultLength && i<fromList.length; i++) {
                                    var parent_page_type = fromList[i].parent_page_type;
                                    var parent_page_code = fromList[i].parent_page_code;
                                    var parent_category_id = fromList[i].parent_category_id;
                                    var trafficSources;
                                    if(parent_page_type == null && parent_page_code == null && parent_category_id == null){
                                        trafficSources = "直接访问（例如：扫码进入）";
                                    }else{
                                        trafficSources = fromList[i].tableShowName;
                                    }
                                    var html = "<tr><td>" + eval(i + "+1") + "</td>"
                                        + "<td>"+ trafficSources +"</td>"
                                        + "<td>"+ fromList[i].amount + "</td>"
                                        + "<td>" + fromList[i].rate + "%</td></tr>";
                                    $("#dataF").append(html);
                                }
                                i++;
                                var otherhtmlf = "<tr><td>" + i++ + "</td>"
                                    + "<td>其他</td>" + "<td>"+ otherAmountF + "</td>"
                                    + "<td>" + otherRateF+ "%</td></tr>";
                                $("#dataF").append(otherhtmlf);
                                $("#table1").show();
                                $("#access_type1").html(access_type);
                            }else{
                                $("#table1").hide();
                            }
                            var sumhtmlf = "<tr><td>" + i++ + "</td>"
                                + "<td>总计</td>" + "<td>"+ amountF + "</td>"
                                + "<td>" + "100%"+ "</td></tr>";
                            $("#dataF").append(sumhtmlf);
                            if(toList != null && toList.length > 0) {
                                var j;
                                for (j = 0; j < defaultLength && j < toList.length; j++) {
                                    var html = "<tr><td>" + eval(j + "+1") + "</td>"
                                        + "<td>" + toList[j].tableShowName + "</td>"
                                        + "<td>" + toList[j].amount + "</td>"
                                        + "<td>" + toList[j].rate + "%</td></tr>";
                                    $("#dataT").append(html);
                                }
                                j++;
                                var otherhtmlt = "<tr><td>" + j++ + "</td>"
                                    + "<td>其他</td>" + "<td>" + otherAmountT + "</td>"
                                    + "<td>" + otherRateT + "%</td></tr>";
                                $("#dataT").append(otherhtmlt);

                                var sumhtmlt = "<tr><td>" + j++ + "</td>"
                                    + "<td>总计</td>" + "<td>" + amountT + "</td>"
                                    + "<td>" + "100%" + "</td></tr>";
                                $("#dataT").append(sumhtmlt);
                                $("#table2").show();
                                $("#access_type2").html(access_type);
                            }else{
                                $("#table2").hide();
                            }
                        }
                    }
                })
			}
			function trackProduct(productId,productName) {
                $("#track").css("visibility", "visible");
                $("#productName").html(productName);
                var time = $("#config-demo").val();
                dataObj = {
                    chooseTime: time,
                    productId: productId,
                    productName: productName
				}
                loadPorduct(1,10);
            }

            function chartModal(data,id,xName){
                $("#"+id).html("");
                var chart = new G2.Chart({
                    id: id,
                    forceFit: true,
                    height: 300
                });
                chart.source(data,{
                    name : {
                        alias: xName
                    },
                    value : {
                        alias: "流量数据"
                    }
                });
                chart.legend(false);
                chart.tooltip(true, {
                    title: null // 默认标题不显示
                });
                chart.interval().position('name*value').color('name').label('value');
                chart.render();
                if(data == null || data.length == 0){
                    tips(id,500);
                }
                return chart;
            }

		//导出图表
/*		function exportCsv2(){
				var access_type = $('input:radio[name="access_type"]:checked').val();
                var stationId = $("#station").val();
                var chooseTime = $("#config-demo").val();
                $.ajax({
                    url: "${rc.contextPath}/product/productDetailChartData",
                    data:{"stationId":stationId,"chooseTime":chooseTime,"accessType":access_type,"saleFlag":$("#saleFlag").val()},
                    dataType:"json",
                    beforeSend : function(){
						$("#search").attr("disabled",true);
						openPartialLayer($("#detailChart"));
                    },
                    complete :function(){
                    	$("#search").attr("disabled",false);
						removeLoading($("#detailChart"));
                    },
                    success: function(data){
						if(data!=null){
							var detailData=data.jsonData;
							var exportContent="\uFEFF品类,浏览量\n";
							for(var i=0;i<detailData.length;i++){
								exportContent += detailData[i].categoryName+","+detailData[i].amount+"\n";
							} 
							var blob = new Blob([exportContent],{type: "text/plain;charset=utf-8"});
	        				saveAs(blob, "非特卖产品详情.csv");
						}
					}
				});
	
	    }*/
		</script>
	</body>
</html>